<template>
	<view class="login-type-2">
		<!--顶部返回按钮  
      :style="{top:getStatusBarHeight()+'px'}"-->
		<uni-icons type="left" size="30" color="#fff" class="back-btn" @tap="navBack"></uni-icons>
		<!-- <text class="back-btn iconfont iconzuo" @tap="navBack"></text> -->
		<view class="login-top">
			<view class="desc">
				<view class="title">Hi~</view>
				<text>汇标检测技术中心欢迎您</text>
			</view>
		</view>
		<view class="login-type-content">
			<image class="login-bg" style="height: 94vw"></image>
			<view class="main">
				<view class="nav-bar">
					<view class="nav-bar-item nav-bar-item-active"> 登录 </view>
				</view>
				<view>
					<view class="login-type-form">
						<view class="input-item">
							<uni-icons type="person-filled" size="30" color="#42A8F3" class="iconfonts"></uni-icons>
							<input class="login-type-input" type="text" name="loginAccount" v-model="username"
								placeholder="请输入员工工号/手机号码" />
						</view>
						<view class="input-item">
							<uni-icons type="locked-filled" size="30" color="#42A8F3" class="iconfonts"></uni-icons>
							<input class="login-type-input" type="password" v-model="password" placeholder="请输入密码" />
						</view>
					</view>
					<!-- <view class="login-type-tips">
            <view class="forget-section">
              密码登录
            </view>
            <text @tap="navTo('/pages/public/password')">忘记密码？</text>
          </view> -->
					<button class="confirm-btn" :loading="btnLoading" @click="submit()">
						登录
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入api
	import {
		postLogin
	} from "@/proxy/asset/admin.api.js";

	export default {
		data() {
			return {
				// 登录中
				btnLoading: false,
				// 登录信息
				username: "",
				password: "",
			};
		},
		methods: {
			// 返回上一页
			navBack() {
				uni.navigateBack();
			},
			// 校验是否为空的方法
			isEmpty(value) {
				return value === null || value === undefined || value === '';
			},
			// 登录接口
			async submit() {
				if (this.isEmpty(this.username)) {
					this.$toast({
						title: "账号不能为空",
						icon: "error",
					});
					return false;
				} else if (this.isEmpty(this.password)) {
					this.$toast({
						title: "密码不能为空",
						icon: "error",
					});
					return false;
				}

				// 发送请求
				try {
					const result = await postLogin({
						username: this.username,
						password: this.password,
					});

					if (result.code == 200) {
						// console.log(result);
						const token = result.token;
						const jobNumber = result.user.jobNumber;
						const deptName = result.user.deptName;
						const type = result.user.type;
						const name = result.user.name;
						const isStaff = result.user.isStaff;
						const rule = result.rule;
						const user_info = {
							jobNumber: jobNumber,
							type: type,
							deptName: deptName,
							isStaff: isStaff,
							name: name,
							// head_portrait: "https://i-blog.csdnimg.cn/blog_migrate/12ea5d8f226ea294f76a8e77cfaf24c5.jpeg",
						};

						uni.setStorageSync("token", token);
						uni.setStorageSync("userInfo", user_info);
						uni.setStorageSync("rule", rule);

						// 成功登录
						uni.reLaunch({
							url: "/pages/index/index",
						});
					} else {
						this.$toast({
							title: result.data.msg,
						});
						return false;
					}
				} catch (error) {
					console.error("登录请求失败", error);
					this.$toast({
						title: "登录请求失败",
						icon: "error",
					});
					return false;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.login-type-2 {
		width: 100%;
		position: relative;

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 48rpx;
			color: #fff;
		}

		.login-top {
			background: #42A8F3;
			background-image: url(https://limsapi.gzhbcss.com/static/index_header_1.jpg);
			background-size: cover;
			background-position: center;
			height: 460rpx;
			position: relative;
			color: #fff;

			.desc {
				position: absolute;
				top: 200rpx;
				left: 40rpx;
				font-size: 48rpx;

				.title {
					font-size: 48rpx;
				}
			}

			.login-pic {
				position: absolute;
				width: 220rpx;
				height: 270rpx;
				right: 30rpx;
				top: 100rpx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72rpx;

			.login-bg {
				width: 94vw;
				height: 94vw;
				margin: 0 3vw;
				background-color: #fff;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}

			.main {
				width: 94vw;
				position: absolute;
				top: 0;
				left: 3vw;

				.nav-bar {
					display: flex;
					height: 100rpx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;

					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96rpx;
						font-size: 30rpx;
						display: flex;
						margin: 0 120rpx;
						justify-content: center;
						color: #42A8F3;
					}

					.nav-bar-item-active {
						border-bottom: 5rpx solid;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50rpx auto;

					.input-item {
						position: relative;
						height: 90rpx;
						line-height: 90rpx;
						margin-bottom: 30rpx; // 标记

						.iconfonts {
							font-size: 50rpx;
							position: absolute;
							left: 0;
						}

						.login-type-input {
							height: 90rpx;
							padding-left: 80rpx;
							border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
						}
					}
				}

				.login-type-tips {
					padding: 0 50rpx;
					display: flex;
					justify-content: space-between;
				}

				.confirm-btn {
					height: 100rpx;
					width: 615rpx;
					background-color: #42A8F3;
					text-align: center;
					border-radius: 60rpx;
					padding: 15rpx 0;
					color: #fff;
					font-size: 30rpx;
				}
			}
		}
	}
</style>